<template>
    <div>
        <BreadCrumbView :breadList="breadList"></BreadCrumbView>
        <div class="contentBox">
            <el-alert title="添加商品信息" type="info" center show-icon>
            </el-alert>
            <el-steps align-center :active="active" finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <el-tabs @tab-click="selectTab" tab-position="left" v-model="activeName">
                <el-tab-pane label="基本信息" name="category">
                    <!-- NOTE 表单验证，不通过不许进入下一步 -->
                    <el-form :rules="rules" :label-position="labelPosition" label-width="80px" :model="goods"
                        ref="addGoods">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="goods.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model.number="goods.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model.number="goods.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model.number="goods.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="goods_cat">
                            <div class="block">
                                <el-cascader v-model="goods.goods_cat" :options="options" @change="handleChange"
                                    :props="{ expandTrigger: 'hover' }"></el-cascader>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name="params">
                    <p>规格</p>
                    <div class="attr">
                        <el-checkbox v-for="(item, index) in attrMant" :key="index" @change="changeCheck" :label="item"
                            border checked></el-checkbox>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="商品属性" name="property">
                    <el-form label-position="top" label-width="80px">
                        <el-form-item v-for="(item, index) in attrOnly" :key="index" :label="item.attr_name">
                            <el-input :value="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="商品图片" name="image">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="content">
                    <QuillView></QuillView>
                    <el-button class="btn" @click="addGoods(goods)" type="primary">添加商品</el-button>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import BreadCrumbView from "../../../components/BreadCrumbView.vue";
import api from "@/api/goods/goods";
import QuillView from "./components/quillView.vue";
export default {
    name: "AddGoods",
    components: { BreadCrumbView, QuillView },
    data() {
        return {
            active: 0,
            activeName: 'category',
            labelPosition: 'top',
            rules: {
                goods_name: [
                    { required: true, message: '此选项为必填项', trigger: 'blur' },
                ],
                goods_price: [
                    { required: true, message: '此选项为必填项', trigger: 'blur' },
                ],
                goods_number: [
                    { required: true, message: '此选项为必填项', trigger: 'blur' },
                ],
                goods_weight: [
                    { required: true, message: '此选项为必填项', trigger: 'blur' },
                ],
                goods_cat: [
                    { required: true, message: '此选项为必填项', trigger: 'blur' },
                ]
            },
            // 添加商品表单
            goods: {
                goods_name: '',
                goods_price: '0',
                goods_number: '0',
                goods_weight: "0",
                goods_cat: []
            },
            // 商品分类多级选择器
            options: [
            ],
            // 商品参数
            attrMant: [],
            // 商品属性
            attrOnly: []
        }
    },
    computed: {
        breadList() {
            return ["商品管理", "添加商品"];
        }
    },
    methods: {
        changeCheck(value) {
            console.log(value);
        },
        selectTab(vC) {
            if (this.goods.goods_cat.length > 0) {
                this.active = vC.index * 1;
            } else {
                this.$message.error('必须选择分类');
                // TODO 必须选择分类，才可以进行下一步
                this.$nextTick(() => {
                    this.activeName = 'category';
                })
            }

        },
        // INFO 添加商品
        async addGoods(value) {
            // TODO表单验证
            this.$refs['addGoods'].validate((valid) => {
                if (valid) {


                    value.goods_cat = value.goods_cat.join(',');
                    api.setGoodsApi(value).then(() => {
                        this.active = 5;
                        this.$notify({
                            title: '成功',
                            message: '恭喜你，汪汪队，你成功了',
                            type: 'success'
                        });
                        this.$router.back();
                    });
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: '请检查必填项是否填写完整！'
                    });
                    this.$nextTick(() => {
                        this.activeName = 'category';
                    })
                    return false;
                }
            });
        },
        async handleChange(value) {
            const attr = await api.getAttributesApi(value[2]);
            if (attr.length > 0) {
                this.attrMant = attr[0].attr_vals.split(',');
            }

            const only = await api.getOnlyApi(value[2]);
            this.attrOnly = only
        },
        // INFO 递归处理多层数据解构
        getCategoryList(arr) {
            const newArr = [];
            arr.forEach(({ cat_name, cat_id, children }) => {
                const obj = {
                    label: cat_name,
                    value: cat_id
                }
                if (children) {
                    obj.children = this.getCategoryList(children)
                }
                newArr.push(obj)
            });
            return newArr;
        },
        async getCategory() {
            const res = await api.getCategoryApi();
            const arr = this.getCategoryList(res)
            this.options = arr;
        }
    },
    created() {
        this.getCategory();
    }
}
</script>

<style lang="scss" scoped>
.contentBox {
    box-shadow: 0px 0px 13px -6px #000;
    margin-top: 20px;
    position: relative;
    box-sizing: border-box;
    padding: 20px;

    .el-steps {
        margin: 20px 0;
        box-sizing: border-box;
        padding: 0 30px;
    }

    .attr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 20px;


        .is-bordered {
            margin: 0 10px 20px 0;

        }
    }

    .btn {
        margin-top: 20px;
    }
}
</style>